<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>POS收单运营管理平台</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link href="<s:url value="/css/common.css"/>" type="text/css" rel="stylesheet" />
<link href="<s:url value="/css/multiselect/prettify.css"/>" type="text/css" rel="stylesheet" />
<link href="<s:url value="/css/multiselect/style.css"/>" type="text/css" rel="stylesheet" />
<link href="<s:url value="/bootstrap-3.3.7/dist/css/bootstrap.min.css"/>" type="text/css" rel="stylesheet" />
<link href="<s:url value="/bootstrap-3.3.7/dist/css/bootstrap.css"/>" type="text/css" rel="stylesheet" />

<script type="text/javascript"
	src="<s:url value="/js/jquery-1.9.1.js" />"></script>
<script type="text/javascript"
	src="<s:url value="/js/jquery-1.9.1.min.js" />"></script>
<script type="text/javascript"
	src="<s:url value="/js/jquery.validate.min.js" />"></script>
<script type="text/javascript"
	src="<s:url value="/js/pwms.validate.js?v13" />"></script>
<script language="javascript" type="text/javascript"
	src="<s:url value="/js/My97DatePicker/WdatePicker.js"/>"></script>
	<script language="javascript" type="text/javascript"
	src="<s:url value="/js/multiselect/multiselect.min.js"/>"></script>
	<script language="javascript" type="text/javascript"
	src="<s:url value="/bootstrap-3.3.7/dist/js/bootstrap.min.js"/>"></script>

<style type="text/css">

.error {
	color: red;
}

</style>

<script type="text/javascript">
var interval;
var timeOver = 120;
	$(document).ready(function() {
		//alert("dd");
		/* $.validator.setDefaults({
			submitHandler : function(form) {
				form.submit();
			}
		}); 
		$.validator.setDefaults({
			debug : true
		});*/

		// 字符最大长度验证（一个中文字符长度为2）
		jQuery.validator.addMethod("stringMaxLength", function(value,element, param) {
			var length = value.length;
			for ( var i = 0; i < value.length; i++) {
				if (value.charCodeAt(i) > 127) {
					length++;
				}
			}
			return this.optional(element) || (length <=param);
		}, $.validator.format("长度不能大于{0}!"));
		
		$("#operatorsForm").validate({
		
			debug : true,
			submitHandler : function(form) {
				var agentIds = "";
			    $("#multiselect_to_1 option").each(function(){
			        var val = $(this).val();
			        agentIds = agentIds +val+ ",";
			    });
			    $("#agentTo").val(agentIds);
				form.submit();
			},
			
			rules : {
				"operators.roleType" : {
					required : true
				},
				"operators.accountNo" : {
					required : true,
				//	stringCheck :true,
					isABC:true,
					stringMaxLength:30
				},
				"operators.mobile" : {
					required : true,
					isMobile : true,
					stringMaxLength:11
				},
				
				"operators.cardType" : {
					required : true
				},
				"operators.cardNo" : {
					required : true,
					stringMaxLength:50,
					isIdCardNo:true
				},
				"operators.realName" : {
					required : true,
					stringMaxLength:150
				},
				"operators.telphone" : {
					stringMaxLength:15
				},
				"operators.shortName" : {
					stringMaxLength:20
				},
				"operators.email" : {
					email:true,
					stringMaxLength:50
				},
				"operators.address" : {
					required : true,
					stringMaxLength:200
				},
				"operators.remark" : {
					stringMaxLength:200
				}
			},
			messages : {
				"operators.roleType" : {required : "必填"},
				"operators.accountNo" : {required : "必填",isABC:"账号必须为英文或数字"},
				"operators.mobile" : {required : "必填"},
				"operators.realName" : {required : "必填"},
				"operators.cardType" : {required : "必填"},
				"operators.cardNo" : {required : "必填"},
				"operators.email" : {email : "请输入有效的Email地址"},
				"operators.address" : {required : "必填"}
				
			},
			onsubmit : true,
			errorPlacement: function(error, element) { 
			    if ( element.is(":radio") ) error.appendTo ( element.parent() ); 
			    else if ( element.is(":checkbox") ) error.appendTo ( element.parent());
			    
			    else if ( element.is("input") ) {
			    	var name = element[0].name;
			    	if( name == "operators.address"  || name == "operators.email" || name == "operators.remark" 
			    			|| name == "operators.shortName" || name == "operators.telphone"){
				        error.appendTo ( element.parent().parent() ); 
			    	}else{
				    	error.appendTo ( element.parent().next() );
			    	}
			    }
			    else if ( element.is("select") ) error.appendTo ( element ); 
			    else error.insertAfter(element); 
			} 

		});

		$("#orgCode").change(function(){
			var orgCode=$(this).val();
			$.ajax({
				url:"<%=basePath%>/pages/queryRoleByOrgCode.ct",
				type:"post",
				data:{"orgCode":orgCode},
				dataType:"json",
				success:function(result){
					var roleTypes = result.roleTypes;
					$("#roleType").html("");
					var htmlStr = "";
					$.each(roleTypes,function(key,values){ 
						htmlStr += "<option value='"+key+"'>"+values+"</option>";
					});
					$("#roleType").html(htmlStr);
					
				},error:function(){
					alert("未知错误！");
				}
			});
		});
		
		$("#roleType").change(function(){
			var roleType=$(this).val();
			var loginRoleType = $("#loginRoleType").val();
			var loginCompanyId = $("#loginCompanyId").val();
			if(loginRoleType!="03"){
				if(roleType=="04"||roleType=="05"){
					$("#areaCodeTr").show();
				}else{
					$("#areaCodeTr").hide();
					$("#agentTr").hide();
				}
			}else{
				if(roleType=="04"||roleType=="05"){
					$.ajax({
						url:"<%=basePath%>/pages/queryAgentBySupAgent.ct",
						type:"post",
						data:{"areaId":loginCompanyId},
						dataType:"json",
						success:function(result){
							var operatorList = result.operatorList;
							$("#agentName").html("");
							var htmlStr = "";
							$.each(operatorList,function(i,operator){ 
								htmlStr += "<option value='"+operator.id+"'>"+operator.realName+"</option>";
							});
							$("#agentName").html(htmlStr);
							
						},error:function(){
							alert("未知错误！");
						}
					});
					$("#agentTr").show();
				}else{
					$("#agentTr").hide();
				}
			}
		});
		
		$("#areaId").change(function(){
			var areaId=$(this).val();
			$("#agentName").html("");
			$("#multiselect_to_1").html("");
			if(areaId=="-1"){
				$("#agentName").html("");
				$("#multiselect_to_1").html("");
				$("#agentTr").hide();
				return false;
			}
			$.ajax({
				url:"<%=basePath%>/pages/queryAgentBySupAgent.ct",
				type:"post",
				data:{"areaId":areaId},
				dataType:"json",
				success:function(result){
					var operatorList = result.operatorList;
					$("#agentName").html("");
					var htmlStr = "";
					$.each(operatorList,function(i,operator){ 
						htmlStr += "<option value='"+operator.org_code+"'>"+operator.orgName+"</option>";
					});
					$("#agentName").html(htmlStr);
					
				},error:function(){
					alert("未知错误！");
				}
			});
			$("#agentTr").show();
		});
		
	});
	
</script>

</head>

<body>
	<!-- 
		<div class="subpage"> -->
			<s:form namespace="/pages" action="merAdd.ct" method="post"
				cssClass="cmxform" id="operatorsForm" theme="simple">
				<table class="tb">
				<input type="hidden" id="loginRoleType" value="<s:property value='#session.session_merchant.roleType'/>"/>
				<input type="hidden" id="loginCompanyId" value="<s:property value='#session.session_merchant.companyid'/>"/>
			        <tr class="tb-line">
			            <td class="tb-td" colspan="6"><div class="tb-h2">POS收单运营管理平台</div></td>
			        </tr>
			
	                <tr class="tb-line bg-gray">
			            <td class="tb-td" colspan="6"><div class="tb-h3">操作员基本信息录入</div></td>
			        </tr>
					<tr class="tb-line">
					
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
					    	<div class="tb-h4">所属机构：</div>
					    </td>
						<td class="tb-td">
		                	<label class="tb-select">
								<s:select cssClass="queryWidth" name="operators.orgCode"
								id="orgCode"
								list="#request.orgList" listKey="insIdCd" listValue="insName" />
		                	</label>
							<font color="red">*</font> <span id="testDIV"></span>
						</td>
					   
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
					    	<div class="tb-h4">角色类别：</div>
					    </td>
						<td class="tb-td">
		                	<label class="tb-select">
						   		<s:select cssClass="queryWidth" name="operators.roleType"
								id="roleType" headerValue="请选择" headerKey=""
								list="#request.roleTypes" listKey="key" listValue="value" /> 
		                	</label>
							<font color="red">*</font>
						</td>
					</tr>
					<tr class="tb-line">
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
					    	<div class="tb-h4">账号：</div>
					    </td>
						<td class="tb-td">
		                	<label class="tb-input-normal">
		                		<s:textfield cssClass="queryWidth"
								id="accountNo" name="operators.accountNo" maxlength="30"></s:textfield>
								 <span id="testDIV"></span>
		                	</label>
							<font color="red">*</font>
						</td>
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
					    	<div class="tb-h4">手机号：</div>
					    </td>
						<td class="tb-td">
		                	<label class="tb-input-normal"><s:textfield cssClass="queryWidth"
								id="mobile" name="operators.mobile" maxlength="11"></s:textfield>
		                	</label>
							<font color="red">*</font>
						</td>
					</tr>
                 
					<tr class="tb-line">
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
					    	<div class="tb-h4">证件类型：</div>
					    </td>
						<td class="tb-td">
		                	<label class="tb-select">
		                		<s:select cssClass="queryWidth" name="operators.cardType"
								id="cardType"
								list="#{'01':'身份证','02':'护照','03':'军官证','04':'驾照','05':'其他' }" />
		                	</label> 
		                	<font color="red">*</font>
						</td>
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
					    	<div class="tb-h4">证件号：</div>
					    </td>
						<td class="tb-td">
		                	<label class="tb-input-normal">
							<s:textfield cssClass="queryWidth" id="cardNo"
								name="operators.cardNo" maxlength="50"></s:textfield> 
		                	</label>
		                	<font color="red">*</font>
						</td>

					</tr>
					<tr class="tb-line">
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
					    	<div class="tb-h4">真实姓名：</div>
					    </td>
						<td class="tb-td">
		                	<label class="tb-input-normal">
		                		<s:textfield cssClass="queryWidth"
								name="operators.realName" maxlength="150" />
		                	</label>
		                	<font color="red">*</font>
						</td>
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
					    	<div class="tb-h4">联系电话：</div>
					    </td>
						<td class="tb-td">
		                	<label class="tb-input-normal">
		                		<s:textfield cssClass="queryWidth"
								name="operators.telphone" maxlength="15" />
		                	</label>
						</td>
					</tr>
				
					<tr class="tb-line">
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
					    	<div class="tb-h4">简称：</div>
					    </td>
						<td class="tb-td" colspan="3">
		                	<label class="tb-input-normal">
								<s:textfield cssClass="someWidth" 
								name="operators.shortName" maxlength="20" />
		                	</label>
						</td>
					</tr>
					<tr class="tb-line">
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
					    	<div class="tb-h4">EMAIL：</div>
					    </td>
						<td class="tb-td">
		                	<label class="tb-input-normal">
		                		<s:textfield cssClass="someWidth" id="email"
								name="operators.email" maxlength="50" />
		                	</label>
						</td>
						
					
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
					    	<div class="tb-h4">性别：</div>
					    </td>
						<td class="tb-td">
		                	<label class="tb-select">
		                		<s:select cssClass="queryWidth" name="operators.sex"
								headerValue="请选择" headerKey="1" id="sex"
								list="#{'0':'女','1':'男' }" />
		                	</label>
						</td>
						
					</tr>
					<tr class="tb-line">
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
					    	<div class="tb-h4">详细地址：</div>
					    </td>
						<td class="tb-td" colspan="3" style="height:auto;line-height:auto;">
		                	<label style="height:auto;line-height:auto;">
		                		<s:textfield name="operators.address" maxlength="200"
								  style="height: 30px; resize: none; width: 730px;padding:0 5px;"></s:textfield>
		                	</label>
		                	<font color="red">*</font>
						</td>
					</tr>
					<tr class="tb-line">
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
					    	<div class="tb-h4">备注：</div>
					    </td>
						<td class="tb-td" colspan="3" style="height:auto;line-height:auto;">
		                	<label style="height:auto;line-height:auto;">
		                		<s:textarea rows="5" cssClass="someWidth" 
								name="operators.remark" maxlength="200" style="height: 102px; resize: none; width: 530px;padding:0 5px;"/>
		                	</label>
						</td>
					</tr>
					
					<tr class="tb-line" style="display:none" id="areaCodeTr">
						 <td width="12%" style="min-width: 150px" align="right" class="tb-td">
					    	<div class="tb-h4">管理区域：</div>
					    </td>
						<td class="tb-td">
		                	<label class="tb-select">
								<s:select cssClass="queryWidth" name="areaId"
								id="areaId" headerValue="全部" headerKey="-1"
								list="#request.areaList" listKey="id" listValue="name"/>
		                	</label>
							<font color="red">*</font> <span id="testDIV"></span>
						</td>
					</tr>
					<tr class="tb-line" style="display:none" id="agentTr">
					<s:textfield type="hidden" id="agentTo" name="agentTo"></s:textfield>
						<td width="12%" style="min-width: 150px" align="right" class="tb-td">
					    	<div class="tb-h4">管理代理商：</div>
					    </td>
						<td colspan="3">
			                <div class="col-xs-5">
			                    <select id="agentName" name="from[]" class="multiselect form-control" size="8" multiple="multiple" data-right="#multiselect_to_1" data-right-all="#right_All_1" data-right-selected="#right_Selected_1" data-left-all="#left_All_1" data-left-selected="#left_Selected_1" style="min-height: 175px">
			                        
			                    </select>
			                </div>
                
			                <div class="col-xs-2">
			                    <button type="button" id="right_All_1" class="btn btn-block" style="margin-top: 25px"><i class="glyphicon glyphicon-forward"></i></button>
			                    <button type="button" id="right_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
			                    <button type="button" id="left_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
			                    <button type="button" id="left_All_1" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
			                </div>
                
			                <div class="col-xs-5">
			                    <select name="to[]" id="multiselect_to_1" class="form-control" size="8" multiple="multiple" style="min-height: 175px"></select>
			                </div>
						</td>
					</tr>


					
					
					
					<tr class="tb-line">
						<td colspan="4" align="center"><span style="font-color: red"><s:actionerror /></span>
							<span style="font-color: red;"><s:actionmessage /></span > <span style="font-color: red;"><s:fielderror
									cssClass="fieldError" /></span>
							<span id="otherError"></span>
						</td>
					</tr>
					
					<tr class="tb-line">
						<td class="tb-td line-submit"  align="center" colspan="4">
	                		<label class="tb-input-submit">
	                			<s:submit id="btnAdd" 								value="保  存" /> 
							</label>
	                		<label class="tb-input-submit">
								<input type="reset" value="取  消"/>
							</label>
							</td>
					</tr>
				</table>

			</s:form>
			
	<s:if test="#request.msg !=null">
		<script language="javascript">
		    alert("${request.msg}");
			window.location="${rootPath}/pages/init.ct";
		</script>
	</s:if>
</body>

<script type="text/javascript">
$(document).ready(function() {
    window.prettyPrint && prettyPrint();
    $('.multiselect').multiselect();
});
</script>

</html>
